<template>
  <div>
    <vue-ueditor-wrap :config="myConfig" v-model="params.content" ></vue-ueditor-wrap>
    <div slot="footer" class="dialog-footer" style="margin-top: 10px;text-align: center;">
      <el-button size="mini" type="primary" @click="submitForm">保 存</el-button>
      <el-button size="mini" @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap';
  export default {
    name: "elUeditor",
    components: {VueUeditorWrap},
    props: {
      params: Object
    },
    data() {
      return {
        content: '',
        editor: null,
        myConfig: {
          // UEditor 资源文件的存放路径
          UEDITOR_HOME_URL: '/components/ueditor/',
          // 上传文件接口
          serverUrl: process.env.VUE_APP_COMMON_API + 'api/uf/boostor/common/ueditor/config',
          // 编辑器不自动被内容撑高
          autoHeightEnabled: false,
          // 工具栏是否可以浮动
          autoFloatEnabled: false,
          // 自动保存
          enableAutoSave: false,
          // 初始容器高度
          initialFrameHeight: 300,
          // 初始容器宽度
          initialFrameWidth: '100%',
          toolbars: [
            [
              // 'source', //源代码
              // 'undo', //撤销
              // 'redo', //重做
              // 'formatmatch', //格式刷
              'bold', //加粗
              'italic', //斜体
              'underline', //下划线
              // 'strikethrough', //删除线
              // 'superscript', //上标
              // 'subscript', //下标
              'justifyleft', //居左对齐
              'justifyright', //居右对齐
              'justifycenter', //居中对齐
              'justifyjustify', //两端对齐
              // 'rowspacingtop', //段前距
              // 'rowspacingbottom', //段后距
              // 'lineheight', //行间距
              // 'anchor', //锚点
              // 'indent', //首行缩进
              // 'snapscreen', //截图
              // 'fontborder', //字符边框
              // 'blockquote', //引用
              // 'pasteplain', //纯文本粘贴模式
              // 'selectall', //全选
              // 'horizontal', //分隔线
              // 'removeformat', //清除格式
              // 'time', //时间
              // 'date', //日期
              // 'insertcode', //代码语言
              // 'inserttable', //插入表格
              // 'insertrow', //前插入行
              // 'insertcol', //前插入列
              // 'mergeright', //右合并单元格
              // 'mergedown', //下合并单元格
              // 'deleterow', //删除行
              // 'deletecol', //删除列
              // 'splittorows', //拆分成行
              // 'splittocols', //拆分成列
              // 'splittocells', //完全拆分单元格
              // 'edittable', //表格属性
              // 'edittd', //单元格属性
              // 'insertparagraphbeforetable', //"表格前插入行"
              // 'deletecaption', //删除表格标题
              // 'inserttitle', //插入标题
              // 'mergecells', //合并多个单元格
              // 'deletetable', //删除表格
              // 'customstyle', //自定义标题
              // 'fontfamily', //字体
              'fontsize', //字号
              // 'paragraph', //段落格式
              // 'simpleupload', //单图上传
              // 'insertvideo', //视频
              'insertimage', //多图上传
              // 'unlink', //取消链接
              // 'link', //超链接
              // 'emotion', //表情
              'spechars', //特殊字符
              // 'searchreplace', //查询替换
              // 'map', //Baidu地图
              // 'gmap', //Google地图
              // 'forecolor', //字体颜色
              // 'backcolor', //背景色
              // 'insertorderedlist', //有序列表
              // 'insertunorderedlist', //无序列表
              // 'fullscreen', //全屏
              // 'directionalityltr', //从左向右输入
              // 'directionalityrtl', //从右向左输入
              // 'pagebreak', //分页
              // 'insertframe', //插入Iframe
              // 'imagenone', //默认
              // 'imageleft', //左浮动
              // 'imageright', //右浮动
              // 'attachment', //附件
              // 'imagecenter', //居中
              // 'wordimage', //图片转存
              // 'edittip ', //编辑提示
              // 'autotypeset', //自动排版
              // 'webapp', //百度应用
              // 'touppercase', //字母大写
              // 'tolowercase', //字母小写
              // 'background', //背景
              // 'template', //模板
              // 'scrawl', //涂鸦
              // 'music', //音乐
              // 'drafts', // 从草稿箱加载
              // 'charts', // 图表
              'cleardoc', //清空文档
              // 'preview', //预览
              // 'print', //打印
              // 'help', //帮助
            ]
          ],
        }
      }
    },
    watch: {
      // value(val) {
      //   this.content = val;
      // },
      // content(val) {
      //   let text = this.editor ? this.editor.getContentTxt() : "";
      //   this.$emit('change', val, text);
      // }
    },
    mounted() {
      // this.content = this.value;
    },
    methods: {
      // ready(editorInstance) {
      //   this.editor = editorInstance;
      // },
      // insertDefineHtml(html) {
      //   this.editor.execCommand('inserthtml', html);
      // },
      submitForm(){
        this.$emit("submitContent",this.params.content,this.params.type,this.params.index)
      },
      cancel(){
        this.$emit("cancelRichText")
      }
    }
  }
</script>
